<template>
  <a-card title="环境监测时间序列分析">
    <!-- 导航栏 -->
    <a-tabs v-model="activeTab" style="margin-bottom: 20px">
      <a-tab-pane key="timeSeries" tab="时间序列分析"></a-tab-pane>
    </a-tabs>
  </a-card>
  <a-row :gutter="16">
    <!-- 左侧：监测点选择区域 -->
    <a-col span="8">
      <a-card title="监测点选择区域">
        <a-tree
          :treeData="treeData"
          :fieldNames="{ key: 'id', title: 'name' }"
          v-model:selectedKeys="selectedKey"
          checkable
          :checkedKeys="selectedKey"
          style="height: 1987px"
        />
      </a-card>
    </a-col>

    <!-- 右侧：数据样本区域 -->
    <a-col span="16">
      <a-card title="数据样本区域">
        <!-- 时间区间选择 -->
        <a-form layout="inline" @submit.prevent="handleQuery">
          <a-form-item label="起始日期">
            <a-date-picker v-model="startDate" placeholder="选择起始日期" />
          </a-form-item>
          <a-form-item label="结束日期">
            <a-date-picker v-model="endDate" placeholder="选择结束日期" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">查询</a-button>
          </a-form-item>
        </a-form>

        <!-- 数据列表展示 -->
        <a-table :columns="columns" :dataSource="dataList" rowKey="id" style="margin-top: 20px">
          <template #action="{ record }">
            <a-button @click="handleViewDetails(record)" type="link">查看详情</a-button>
          </template>
        </a-table>
      </a-card>
      <!-- 预测曲线图展示 -->
      <a-card title="未来7天预测" style="margin-top: 20px">
        <div style="height: 400px">
          <Echart :option="chartOptions" name="chartOptions1" />
        </div>
      </a-card>

      <a-card title="当前月预测" style="margin-top: 20px">
        <div style="height: 400px">
          <Echart :option="chartOptions" name="chartOptions2" />
        </div>
      </a-card>

      <a-card title="当前年预测" style="margin-top: 20px">
        <div style="height: 400px">
          <Echart :option="chartOptions" name="chartOptions3" />
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
  // 引入 Vue 的 ref 和 computed
  import { ref, computed, onMounted, nextTick } from 'vue';

  // 引入 Echart 组件
  import Echart from '/@/components/e-chart.vue'; // 确保路径正确

  // 定义变量
  const activeTab = ref('timeSeries'); // 当前选中的标签
  const startDate = ref(null); // 起始日期
  const endDate = ref(null); // 结束日期
  const selectedKey = ref(['1']); // 选中的监测点

  // 监测点树形结构数据
  const treeData = ref([
    { id: '1', name: '监测点A' },
    { id: '2', name: '监测点B' },
    // 可以添加更多监测点
  ]);

  // 表格列配置
  const columns = [
    { title: '点名', dataIndex: 'name', key: 'name' },
    { title: '时间', dataIndex: 'time', key: 'time' },
    { title: '值', dataIndex: 'value', key: 'value' },
    { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
  ];

  // 数据列表
  const dataList = ref([
    { id: 1, name: '监测点A', time: '2024-10-01', value: 23 },
    { id: 2, name: '监测点A', time: '2024-10-02', value: 24 },
    { id: 3, name: '监测点B', time: '2024-10-01', value: 30 },
    { id: 4, name: '监测点B', time: '2024-10-02', value: 31 },
    // 更多数据项...
  ]);

  // 查询按钮点击事件
  const handleQuery = () => {
    console.log('查询数据:', { startDate: startDate.value, endDate: endDate.value, selectedKey: selectedKey.value });
    // 根据选中的日期和监测点，执行查询操作，更新数据列表
  };

  // 查看详情按钮点击事件
  const handleViewDetails = (record) => {
    console.log('查看详情:', record);
  };

  // 定义图表配置项（使用 computed）
  const chartOptions = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['监测点A', '监测点B'],
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2024-10-01', '2024-10-02', '2024-10-03', '2024-10-04'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '监测点A',
          type: 'line',
          stack: '总量',
          data: [23, 45, 56, 67],
          smooth: true,
        },
        {
          name: '监测点B',
          type: 'line',
          stack: '总量',
          data: [34, 56, 78, 89],
          smooth: true,
        },
      ],
    };
  });

  // 组件加载完成后初始化图表
  onMounted(() => {
    nextTick(() => {
      // 在此处可以执行一些额外操作，比如获取数据
    });
  });
</script>

<style scoped>
  .ant-card {
    margin-bottom: 20px;
  }

  .ant-table {
    margin-top: 20px;
  }

  .echarts-container {
    height: 300px;
  }
</style>
